<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { usePagination, useSwitchable } from '@/utils/hooks'
import { handleApi } from '@/utils/alert'
import { message, TableColumnType } from 'ant-design-vue'
import type { TableProps } from 'ant-design-vue'
import QueryForm from './supporter-orders-form.vue'
import { getSOrderList, SupplyChainOrderRemark } from '@/api/order'
import { dateFormatter } from '@/utils/common'
import GoodsDetail from '@/components/goods-detail.vue'
import Copy from '@/components/copy.vue'
import PostDetail from '@/components/post-detail.vue'
import OrderStatus, { OrderStatusProps } from '@/components/order-status.vue'
import SupporterOrdersForm from "#/supporter-orders/supporter-orders-form.vue";
import OrderErp from "@/components/order-erp.vue";
import PostDate from "@/components/post-date.vue";
import ExpressCell from "@/components/express-cell.vue";
import OrderRemark from '@/components/order-remark.vue'
import OrderRemarkForm, { OrderRemarkEvent } from '@/components/order-remark-form.vue'

const queryRef = ref<typeof SupporterOrdersForm>()

const { dataSource, pagination, fetch, params, loading } = usePagination(getSOrderList, handleApi)
const { state: remarkModalState, on: remarkModalOn, off: remarkModalOff } = useSwitchable()
const remarking = ref<IOrder | undefined>()

const columns: (TableColumnType & DataIndex<IOrder>)[] = [
  { key: 'goods_info', title: '商品信息', width: 300 },
  { key: 'price&num', title: '单价/数量', width: 100 },
  { key: 'post_info', title: '收件人信息', width: 200 },
  { key: 'seller_words', title: '订单备注', width: 250 },
  { key: 'tracking_number', title: '快递单号', width: 200 },
  { key: 'status', title: '状态', width: 200 },
  { key: 'erp', title: 'ERP信息', width: 200 },
  { key: 'create_time', dataIndex: 'order_create_time', title: '创建时间', width: 200 },
  { key: 'post_date', title: '发货时间', width: 150 },
  { key: 'action', title: '操作', width: 100, fixed: 'right' }
]

const onTableChange: TableProps['onChange'] = (pg) => {
  params.value.page = pg.current
  params.value.pagesize = pg.pageSize
  fetch()
}

onMounted(() => {
  fetch()
})

const onFormSubmit = (p: PaginateQuery<IOrder>) => {
  params.value = {
    ...p,
    page: params.value.page,
    pagesize: params.value.pagesize
  }
  fetch()
}


const startRemark = (order: IOrder) => {
  remarking.value = order
  remarkModalOn()
}

const remarkOrder = async ({ remark }: OrderRemarkEvent) => {
  if (remarking.value) {
    const res = await SupplyChainOrderRemark({ remark, order_id: remarking.value.order_id }).catch(handleApi)
    if (res) {
      message.success(res.message)
      await fetch()
      remarking.value = undefined
      remarkModalOff()
    }
  }
}


</script>


<template>
  <div class="px-4 py-8">
    <QueryForm @submit="onFormSubmit" ref="queryRef"></QueryForm>
  </div>

  <ATable
    :scroll="{ x: 2000 }"
    :columns="columns"
    :data-source="dataSource"
    :loading="loading"
    :pagination="pagination"
    @change="onTableChange"
  >
    <template #bodyCell="{ column, value, record }">

      <template v-if="column.key === 'goods_info'">
        <div class="flex text-xs text-gray-600 justify-between">
          <Copy :value="record.order_id" class="opacity-80">
            <span class="text-nowrap text-ellipsis">订单编号: {{ record.order_id }}</span>
          </Copy>
        </div>
        <GoodsDetail v-bind="record"></GoodsDetail>
      </template>

      <template v-if="column.key === 'price&num'">
        <div class="h-full">
          <div class="text-gray-600 flex flex-col space-y-1 h-14 first:mt-6 text-sm items-center">
            <span>x{{ record.goods_count }}</span>
          </div>
        </div>
      </template>

      <template v-if="column.key === 'post_info'">
        <PostDetail v-bind="record as IOrder"></PostDetail>
      </template>

      <template v-if="column.key === 'seller_words'">
        <order-remark v-bind="record"></order-remark>
      </template>

      <template v-if="column.key === 'tracking_number'">
        <ExpressCell v-bind="record"></ExpressCell>
      </template>

      <template v-if="column.key === 'status'">
        <OrderStatus v-bind="record as OrderStatusProps"></OrderStatus>
      </template>

      <template v-if="column.key === 'erp'">
        <OrderErp v-bind="record" />
      </template>

      <template v-if="column.key === 'create_time'">
        {{ dateFormatter(value) }}
      </template>

      <template v-if="column.key === 'post_date'">
        <PostDate v-bind="record"></PostDate>
      </template>

      <template v-if="column.key === 'action'">
        <div class="flex flex-col items-center">
          <AButton type="link" @click="startRemark(record)">订单备注</AButton>
        </div>
      </template>
    </template>
  </ATable>

  <AModal v-model:open="remarkModalState" :footer="null" width="500px" destroy-on-close>
    <OrderRemarkForm @submit="remarkOrder" :order="remarking"></OrderRemarkForm>
  </AModal>
</template>